<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./reset.css">
    <link rel="stylesheet" href="./megaloscope.css">
</head>

<body>
    <div class="zoom">
        <div class="small_area">
            <img src="./image/2.png" width="200px" height="200px">
            <span class="mask"></span>
        </div>
        <div class="pic">
            <img src="./image/2.jpg" width="60px" height="50px">
            <img src="./image/5.jpg" width="60px" height="50px">
            <img src="./image/6.jpg" width="60px" height="50px">
        </div>
        <div class="big_area">
            <img src="./image/2.png" width="620px" height="620px">
        </div>
    </div>
</body>
<script src="./js/megaloscope.js"></script>
<script>
    // var pic = document.querySelectorAll(".pic img");
    // var zoom = document.querySelector('.zoom');
    // var sImg = document.querySelector(".small_area img");
    // var bImg = document.querySelector(".big_area img");
    // var small = document.querySelector(".small_area");
    // var big = document.querySelector('.big_area');
    // var mask = document.querySelector('.mask');
    // mask.style.width = big.clientWidth * (sImg.offsetWidth / bImg.offsetWidth) + "px";
    // mask.style.height = big.clientHeight * (sImg.offsetHeight / bImg.offsetHeight) + "px";
    // var maxWidth = sImg.clientWidth - mask.offsetWidth;
    // var maxHeight = sImg.clientHeight - mask.offsetHeight;
    // small.onmouseenter = function() {
    //     mask.style.left = 0;
    //     big.style.left = 210 + "px";
    //     big.style.top = -100 + "px";
    // }
    // small.onmouseleave = function() {
    //     mask.style.left = -10000 + "px";
    //     big.style.left = -10000 + "px";
    // }
    // small.onmousemove = function(e) {
    //     e = e || window.event;
    //     var nLeft = e.pageX - zoom.offsetLeft - zoom.clientLeft - mask.offsetWidth / 2;
    //     var nTop = e.pageY - zoom.offsetTop - zoom.clientTop - mask.offsetHeight / 2;
    //     nLeft = Math.min(maxWidth, Math.max(0, nLeft));
    //     nTop = Math.min(maxHeight, Math.max(0, nTop));
    //     mask.style.left = nLeft + "px";
    //     mask.style.top = nTop + "px";
    //     bImg.style.left = -(bImg.offsetWidth - big.offsetWidth) * nLeft / (sImg.offsetWidth - mask.offsetWidth) + "px";
    //     bImg.style.top = -(bImg.offsetHeight - big.offsetHeight) * nTop / (sImg.offsetHeight - mask.offsetHeight) + "px";
    // }
    // pic.forEach(function(item) {
    //     item.onclick = function() {
    //         var s = sImg.src;
    //         sImg.src = item.src;
    //         bImg.src = item.src;
    //         item.src = s;
    //     }
    // })
</script>

</html>